<template>
	<!-- 工具箱分类管理 -->
	<tableIndex
		:tableData="tableData"
		:tableHead="tableHead"
		:isIndex="true"
		:isSelection="true"
		:isRadio="false"
		:fields="state.fields"
		:height="500"
		:page="state.page"
		@selectChange="selectChange"
		@searchList="searchList"
		@page-change="pageChange"
		@resetList="resetList"
	>
		<template #btns>
			<div style="text-align: end">
				<el-button
					type="primary"
					class="button_edit"
					@click="optionHandel('add')"
					><svg-icon icon-class="add-icon-1" class="icon-export m-r5"></svg-icon
					>新增</el-button
				>
				<el-button
					type="danger"
					class="button_delete"
					@click="deleteHandel('')"
					>批量删除</el-button
				>
			</div>
		</template>
		<template #operate>
			<el-table-column label="操作" width="200" fixed="right">
				<template #default="{ row }">
					<div class="d-flex" style="align-items: center">
						<el-button
							size="small"
							type="primary"
              class="button_funtion2"
							@click="optionHandel('next', row)"
							v-if="row.pid == 0"
							>添加下级</el-button
						>
						<el-button
							size="small"
							type="primary"
              class="button_edit"
							@click="optionHandel('edit', row)"
							>编辑</el-button
						>
						<el-button
							size="small"
							class="button_edit"
							@click="deleteHandel(row)"
							type="primary"
							><svg-icon icon-class="delete-icon"
						/></el-button>
					</div>
				</template>
			</el-table-column>
		</template>
	</tableIndex>

	<!-- 新增编辑 -->
	<public-dialog
		:title="title + '分类'"
		:width="'30%'"
		:confirmButtonTitle="'提交'"
		v-model:visible="visible"
		@onConfirm="onConfirm"
	>
		<el-form :model="dialogForm" ref="formRef" label-width="100px">
			<el-form-item label="上级分类" v-if="title == '添加下级'">
				<el-input v-model="dialogForm.parentName" disabled placeholder="" />
			</el-form-item>
			<el-form-item
				label="分类名称"
				:rules="{
					required: true,
					message: '请输入分类名称',
				}"
				prop="categoryName"
			>
				<el-input v-model="dialogForm.categoryName" placeholder="" />
			</el-form-item>
		</el-form>
	</public-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { toolApi } from "@/api/investment.js";
import tableIndex from "@/components/table/index.vue";
import PublicDialog from "@/components/PublicDialog.vue";
import {
	ElRow,
	ElCol,
	ElForm,
	ElMessage,
	ElButton,
	ElMessageBox,
} from "element-plus";
const route = useRoute();
const router = useRouter();

const dialogForm = ref({});
const visible = ref(false);
const title = ref("新增");
const state = reactive({
	page: {
		page: 1,
		pageSize: 50,
		total: 0,
	},
	fields: [
		{
			key: "param",
			label: "搜索",
			type: "input",
			placeholder: "分类名称关键字搜索",
		},
	],
});

const tableData = ref([]);
const tableHead = ref([
	{
		prop: "categoryName",
		label: "分类名称",
	},
	{
		prop: "createTime",
		label: "创建时间",
	},
	{
		prop: "userName",
		label: "创建人",
	},
]);
const selectList = ref([]);
const selectChange = (e) => {
	selectList.value = e;
};
//搜索接口请求
const searchList = (e) => {
	getPage(e);
};
//分页变化
const pageChange = (e) => {
	state.page.page = e.page;
	state.page.pageSize = e.limit;
	getPage();
};
const getPage = (e) => {
	console.log("---", e);
	let obj = {
		pageNum: state.page.page,
		pageSize: state.page.pageSize,
		...e,
	};
	toolApi.getToolCatPag(obj).then((res) => {
		if (res.code == "200") {
			tableData.value = res.data.content.map((v) => {
				v.id = v.categoryId;
				return v;
			});
			state.page.total = res.data.totalSize;
		}
	});
};
const deleteHandel = (row) => {
	let ids = [];
	if (row) {
		ids = row ? [row.categoryId] : [];
	} else if (selectList.value.length != 0) {
		ids = selectList.value.map((v) => v.categoryId);
	} else {
		return ElMessage.warning("请选择要删除的数据");
	}
	ElMessageBox.confirm("确认删除吗?", {
    confirmButtonText: "确认",
    confirmButtonClass: "button_view",
    cancelButtonText: "取消",
    cancelButtonClass: "button_cancel2",
		type: "warning",
	})
		.then(() => {
			toolApi.delBatch(ids).then((res) => {
				if (res.code == "200") {
					getPage();
				}
			});
		})
		.catch(() => {});
};

const optionHandel = (type, row) => {
	visible.value = true;

	switch (type) {
		case "add":
			title.value = "新增";
			break;
		case "edit":
			title.value = "编辑";
			dialogForm.value = {
				...row,
			};
			break;
		case "next":
			title.value = "添加下级";
			dialogForm.value = {
				categoryName: "",
				parentName: row.categoryName,
				pid: row.categoryId,
			};
			break;

		default:
			break;
	}
};

const formRef = ref(null);
const onConfirm = () => {
	formRef.value.validate((valid) => {
		if (valid) {
			toolApi.createAndUpdate(dialogForm.value).then((res) => {
				if (res.code == "200") {
					visible.value = false;
					dialogForm.value = {};
					getPage();
				}
			});
		}
	});
};

onMounted(() => {
	getPage();
});
</script>
<style lang="scss" scoped>
.delete-icon {
	width: 20px;
	height: 20px;
	cursor: pointer;
}
</style>
